<template>
  <div class="basis-full">
    <h1>admin</h1>
    <span>{{ dateTime }}</span>
    <span>{{ data }}</span>
    <el-button :plain="true" @click="alertMessage('操作成功123123')">alertMessage</el-button>
    <el-button :plain="true" @click="alertLoad">alertLoad</el-button>
    <el-button :plain="true" @click="alertMessageBox('操作提示31223')">alertMessageBox</el-button>
    <el-button :plain="true" @click="alerMsgboxConfirm('你确定吗？')">alerMsgboxConfirm</el-button>
  </div>
</template>
<script lang="ts" setup>
import { formatToDateTime } from "@/utils/dateUtils";

import { ref } from "vue";
const currentTime = new Date();
const dateTime = formatToDateTime(currentTime);
const $message: any= inject('$message')
const $loading: any= inject('$loading')
const $msgbox: any= inject('$msgbox')
const $msgboxConfirm: any= inject('$msgboxConfirm')
const alertMessage = function (message: string) {
  $message.success(message)
};
const data = ref(10);
const alertLoad = function () {
  const load = $loading()

  setTimeout(() => {
    load.close()
  }, 2000)
};

const alertMessageBox = function(message: string){
  $msgbox(message="开始提示了", (data: string)=>{console.log(message, data)});
}

import { random } from "lodash"
console.log(random(10,100))


const alerMsgboxConfirm = function(message: string){
  $msgboxConfirm(message, 'success');
}

</script>

<style scoped>

.w-screen {
  width: 100vw;
}
</style>
